<template>
  <baseCard :title="'业务运维'" :height="height">
    <div class="sm-data-echarts-layout">
      <VptDataView v-bind="$attrs"></VptDataView>
      <VptEchartsView
        class="sm-dv-echarts"
        v-bind="$attrs"
        :isLandscape="isLandscape"
        :chartType="chartType"
        @updateChart="updateChart"
      ></VptEchartsView>
    </div>
  </baseCard>
</template>

<script setup>
import { computed } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptDataView from "./components/vpt-data-view.vue";
import VptEchartsView from "./components/vpt-echarts-view";
import { useRouterStore } from "@/store/routerStore.js";

const props = defineProps({
  height: { type: String, default: "6.4rem" },
  chartType: { type: String, default: "init" },
});

const routerStore = useRouterStore();

const isLandscape = computed(() => {
  return routerStore.prefix === "horvsreen";
});

const updateChart = (params) => {
  emit("updateChart", params);
};

const emit = defineEmits(["updateChart"]);
</script>

<style lang="less" scoped>
.sm-data-echarts-layout {
  display: flex;
  width: 100%;

  .sm-dv-echarts {
    flex: 1;
  }
}
</style>